<template>
  <div class="nav">
    <ul class="nav-list">
      <li class="nav-title">
        <span>坤课网</span>
      </li>
      <li><span @click="toPage('/index', 1)" :class="[active == 1 ? 'choice' : '']">首页</span></li>
      <li><span @click="toPage('/course', 2)" :class="[active == 2 ? 'choice' : '']">课程</span></li>
      <li>
        <el-dropdown placement="bottom">
          <span>发现</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>教程</el-dropdown-item>
            <el-dropdown-item>专栏</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </li>
      <li>
        <el-dropdown placement="bottom" @command="handleCommand">
          <span>商业合作</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="/cooperation/lecturer">讲师入驻</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </li>
    </ul>
    <div v-if="JSON.stringify(userInfo) == '{}'">
      <el-button type="primary" size="medium" @click="toLoginPage('/login?type=1')">登录</el-button>
      <el-button size="medium" @click="toLoginPage('/login?type=2')">注册</el-button>
    </div>
    <div v-else class="nav-right">
      <div class="el-icon-message-solid right-item"></div>
      <el-popover placement="bottom" width="200" trigger="hover">
        <div class="userInfo" @click="$router.push('/user/space')">
          <el-avatar :size="55" :src="userInfo.avatar" slot="reference" class="avatar"></el-avatar>
          <div>
            <span class="nickname">{{ userInfo.nickname }}</span>
          </div>
        </div>
        <div class="user-setting">
          <div class="setting-item">
            <span @click="$router.push('/user/space/course')">我的课程</span>
          </div>
          <div class="setting-item">
            <span @click="$router.push('/user/space/notebook')">我的笔记</span>
          </div>
          <div class="setting-item">
            <span @click="$router.push('/user/space/order')">我的订单</span>
          </div>
          <div class="setting-item">
            <span>安全退出</span>
          </div>
        </div>
        <el-avatar :size="40" :src="userInfo.avatar" slot="reference"></el-avatar>
      </el-popover>
    </div>
  </div>
</template>

<script>
export default {
  name: "nav-top",
  data() {
    return {
      active: 1
    }
  },
  methods: {
    toPage(url, idx) {
      this.active = idx
      this.$router.push(url)
    },
    getActive(url) {
      if (url.match('/index')) this.active = 1;
      else if (url.match('/problem')) this.active = 2
      else if (url.match('/competition')) this.active = 3

    },
    toLoginPage(url) {
      this.$router.push(url)
    },
    handleCommand(command) {
      this.$router.push(command)
    }
  },
  watch: {
    $route(to, from) {
      this.getActive(to.path)
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo || {}
    }
  }
}
</script>

<style scoped>
.nav {
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-list {
  list-style: none;
  padding: 0;
}

.nav-list li {
  float: left;
  margin: 0 20px;
  cursor: pointer;
}

.nav-title {
  font-family: "HarmonyOS_Sans_Regular";
  font-size: 16px;
}

.choice {
  padding-bottom: 8px;
  border-bottom: solid #409EFF 3px;
}

.nav-list .el-button,
.el-dropdown {
  color: #000000 !important;
  font-size: 16px !important;
}

.userInfo {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.nickname {
  font-size: 16px;
  color: #000;
}

.avatar {
  margin: 0 10px;

}

.user-setting {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.setting-item {
  text-align: center;
  padding: 10px 0;
  width: 50%;
  background-color: rgb(248, 250, 252);
  cursor: pointer;
}

.setting-item:hover {
  background-color: rgb(222, 223, 223);
}

.nav-right {
  display: flex;
  align-items: center;
}

.right-item {
  margin-right: 20px;
  vertical-align: middle;
  font-size: 20px;
  color: rgb(84, 92, 99);
}
</style>